<template>
	<view class="selectLink">
		<view class="selectBox flex">
			<fui-input @focus="isFocus=true" @blur="isFocus=false" placeholder="搜索歌名/歌手/歌词">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="search" color="#333" :size="48"></fui-icon>
					</view>
				</template>
			</fui-input>
			<view style="padding: 0rpx 20rpx;" v-if="isFocus">
				搜索
			</view>
		</view>
		<view class="listBox">
			<scroll-view scroll-y :show-scrollbar="false" class="swiper" style="background-color: #F9F9F9;">
				<view class="audioBox flex" v-for="(item,index) in 10">
					<view class="aduioImg">
						<image src="../static/indexad/dy.png" mode=""></image>
					</view>
					<view class="">
						<view class="">
							歌名
						</view>
						<view class="" style="font-size: 28rpx;color: #B0B0B0;">
							作者 - 0：30
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import GoodsList from '@/publicPages/goods/list.vue'
	export default {
		components: {
			GoodsList
		},
		name: 'selectLink',
		data() {
			return {
				isFocus: false,
				show: false,
			};
		},
		methods: {
			cancel() {
				this.show = false
			},
			change(e) {
				this.show = false
				this.linkName = e.text
				console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.audioBox {
		background-color: white;
		padding: 20rpx;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}

	.aduioImg {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;

		image {
			width: 100rpx;
			height: 100rpx;

		}
	}

	.swiper {
		padding: 0rpx 10rpx;
		height: 90%;
	}

	.selectBox {
		background-color: white;
		height: 110rpx;
	}

	.listBox {
		height: calc(90vh - 110rpx);
	}

	.selectLink {
		background-color: #F8F8F8;
		width: 100vw;
		height: 90vh;
	}
</style>